<template>
  <div class="app_one">
    <!-- <div>咨询列表</div> -->
    <el-form :model="form" ref="formRef" :rules="baseRules">
      <el-row>
        <el-form-item label="是否显示" prop="status" class="zzz">
          <el-select v-model="form.status" placeholder="请选择">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="是否显示在首页" prop="showIndex" class="zzz">
          <el-select v-model="form.showIndex" placeholder="请选择">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select> </el-form-item
      ></el-row>
      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title" />
      </el-form-item>
      <el-form-item label="类型" prop="cate">
        <el-input v-model="form.cate" />
      </el-form-item>
      <el-form-item label="图片" prop="image">
        <el-upload
          class="avatar-uploader"
          action="#"
          ref="uploadFile"
          :http-request="uploadAction"
          :show-file-list="false"
          :limit="1"
          :auto-upload="true"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeUpload"
          :on-exceed="handleExceed"
        >
          <img v-if="form.image" :src="form.image" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <el-input
          v-model="form.content"
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 6 }"
        />
      </el-form-item>
      <div class="mr">
        <el-form-item>
          <el-button type="primary" @click="onSubmit"> {{ name }}</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { ElForm, ElMessage } from 'element-plus'

import type { UploadRawFile, UploadFile } from 'element-plus'

import { UploadImg, UploadText, Updateenws } from '@/service/main/curd/curd'
import router from '@/router'
const uploadFile = ref()
const state = reactive({
  fileList: []
})
const formRef = ref<InstanceType<typeof ElForm>>()
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const handleExceed = (files: File[], fileList: UploadFile[]) => {
  if (state.fileList.length >= 1) {
    ElMessage.error('只能上传一个图片')
    return
  }
}
const beforeUpload = (file: UploadRawFile) => {
  const type = ['image/jpeg', 'image/jpg', 'image/png']
  if (type.indexOf(file.type) === -1) {
    ElMessage.error('上传的文件必须是JPG、JPEG、PNG三种之一!')
    return false
  }

  return true
}
const name = ref('上传')
const options1 = [
  {
    value: '1',
    label: '显示'
  },
  {
    value: '0',
    label: '不显示'
  }
]
const uploadAction = async (option: any) => {
  let param = new FormData()
  param.append('file', option.file)
  const { data, status } = await UploadImg(param)
  if (status == 200) {
    form.image = data
    ElMessage('上传成功')
  } else {
    ElMessage('上传失败')
  }
}
const form = reactive({
  title: '',
  cate: '',
  image:
    'http://localhost:8083/images/bbd4fcba-4dd3-4602-a537-1b643031362f.png',
  content: '',
  status: '',
  showIndex: ''
})
const isUpdate = ref(false)
onMounted(async () => {
  if (Object.keys(router.currentRoute.value.params) != 0) {
    isUpdate.value = true
    form.title = router.currentRoute.value.params.title
    form.cate = router.currentRoute.value.params.cate
    form.image = router.currentRoute.value.params.image
    form.content = router.currentRoute.value.params.content

    form.newsId = router.currentRoute.value.params.newsId
    form.status = router.currentRoute.value.params.status
    form.showIndex = router.currentRoute.value.params.showIndex
    name.value = '更新'
  }

  // console.log('router', router.currentRoute.value)
})
const baseRules = {
  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
  cate: [{ required: true, message: '请输入分组', trigger: 'blur' }],
  image: [{ required: true, message: '请输入', trigger: 'blur' }],
  content: [{ required: true, message: '请输入', trigger: 'blur' }]
}
const onSubmit = () => {
  formRef.value?.validate(async (valid: any) => {
    if (valid) {
      if (isUpdate.value) {
        const { data, status } = await Updateenws(form)
        if (status == 200) {
          ElMessage({ message: '更新成功', type: 'success' })
          window.location.reload()
        } else {
          ElMessage({ message: '更新失败', type: 'warning' })
        }
      } else {
        const { data, status } = await UploadText(form)
        if (status == 200) {
          ElMessage('上传成功')
          window.location.reload()
        } else {
          ElMessage('上传失败')
        }
      }
    }
  })
}
</script>

<style scoped>
.app_one {
  margin-top: -5px;
  padding: 20px;
  padding-left: 40px;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.mr {
  padding-bottom: 20px;
}
.zzz .el-form-item__content {
  text-align: start;
}
</style>
